<template>
  <div class="h-panel" v-padding="30" style="height: 100%;display: flex;flex-direction: column;">
    <div style="padding-bottom: 10px">
      <Button size="s" color="blue" icon="h-icon-plus" @click="create">新增</Button>
      <Button size="s" color="blue" icon="h-icon-refresh" @click="refresh">刷新列表</Button>
      <Button size="s" color="blue" icon="h-icon-refresh" @click="refreshGateWay">刷新网关</Button>
    </div>
    <Layout style="flex: 1">
      <Sider>
        <Table :datas="datas" ref="table" style="height: 100%" @rowSelect="toShowDetail" selectRow>
          <TableItem title="名称" prop="title"></TableItem>
          <TableItem title="状态" :width="110">
            <template slot-scope="{data}">
              <i v-if="!data.enabled" class="icon-ban" style="font-size:1.2rem;color:#d3d3d3;cursor: not-allowed;"><span style="font-size:.9rem;padding-left: 10px;">禁用</span></i>
              <i v-else-if="data.type=='url'" class="icon-link" style="font-size:1.2rem;cursor: pointer" @click="open(data.url,'_blank')"><span style="font-size:.9rem;padding-left: 10px;">链接</span></i>
              <HSwitch v-else v-model="data.running" @change="switchService(data)">
                <span slot="open">运行中</span>
                <span slot="close">已停止</span>
              </HSwitch>
            </template>
          </TableItem>

          <div slot="empty">暂时无数据</div>
        </Table>
      </Sider>
      <Content style="height: 100%;padding-left:10px">
        <ServiceDlg :service="currentService" @change="onChange"/>
      </Content>
    </Layout>

    <Modal v-model="showAdd">
      <div slot="header">新增服务</div>
      <div style="width: 600px">
        <ServiceForm :service="newService" @change="onChange" isAdd/>
      </div>
    </Modal>
  </div>
</template>
<script>
import {HeyUI, ajax, DataSource, util} from 'framework'
import ServiceDlg from "./serviceDlg.vue";
import ServiceForm from './serviceForm.vue'


let serviceDs = new DataSource("server/list_services")

export default {
  components: {ServiceDlg, ServiceForm},
  data() {
    return {
      showAdd: false,
      submitting: false,
      showDetail: false,
      serverConfigs: {},
      newService: {
        name: '',
        file: [],
        url: '',
        path: '',
        type: 'jar',
        workDir: null,
        commands: null
      },
      datas: serviceDs.data,
      currentService: {
        id: '',
        name: '',
        file: [],
        url: '',
        path: '',
      }
    }
  },
  mounted() {
    serviceDs.load();

  },
  methods: {
    refresh() {
      util.clean(this.currentService)
      serviceDs.load();
    },
    toShowDetail(dt) {
      this.currentService = Object.assign({}, dt);
      // this.showDetail = true
    },
    create() {
      // Object.clean(this.newService);
      this.newService = {type: 'jar', path: '/', params: '--solon.profiles.active=prod',enabled:true,auto:false,mapping:false,found:false};
      this.showAdd = true;
    },
    onChange() {
      this.showAdd = false
      util.clean(this.currentService)
      serviceDs.load();
    },
    switchService(service) {
      if (!service.running) {
        ajax.upload("server/stop_service", service).then(r => {
          this.$Message("停止中,请稍后刷新")
          setTimeout(() => serviceDs.load(), 1000)
        }).catch(r => {
          this.$Message({type: "error", text: "停止失败"})
          serviceDs.load()
        })
      } else {
        ajax.upload("server/start_service", service).then(r => {
          this.$Message("启动中,请稍后刷新")
          setTimeout(() => serviceDs.load(), 1000)
        }).catch(r => {
          this.$Message({type: "error", text: "启动失败"})
          serviceDs.load()
        })
      }
    },
    refreshGateWay() {
      ajax.post("system/nginxCmd", {cmd: 'reload'}).then(r => {
        // this.ngxStatus();
        this.$Message("网关已刷新")
      }).catch(e => {
        this.$Modal({title: "错误信息", content: e.description.replace(/\n/g, '<br/>')});
      })
    }
  }
}
</script>
